<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }

       #outer{
           width: 440px;
           margin: 50px auto;
           padding: 10px 0;
           background-color: white;
           position: relative;

           /*隐藏溢出的内容*/
           overflow: hidden;
       }

       #imgList{
           list-style: none;
           width: 1100px;
           /*开启绝对定位*/
           position: absolute;          
       }

       #imgList li{
           float: left;
           margin:0 10px;

       }

       #navDiv{
           position: relative;
           bottom: 13px;
           margin-top: 300px;
           margin-left: 100px;
           /*left: 42.5px;*/

       }


       #navDiv a{
           float: left;
           width: 15px;
           height: 15px;
           background-color: red;
           margin: 0 5px;
           /*透明度*/
           opacity: 0.5;
       }

       #navDiv a:hover{
           background-color: black;
       }
        #add{
            position: relative;
            margin-top: 320px;
            margin-left: 10px;
        }
        #tab{
            font-size: 20px;
            line-height: 50px;
            height: 50px;
        }
       select{
           font-size: 20px;
       }
        .sub{
            width: 50px;
            height: 40px;
        }
        input{
          height:30px;
        }
    </style>
    <script  type="text/javascript" src="${pageContext.request.contextPath }\statics\js\jquery-1.12.4.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/tools.js">

    </script>
    <script type="text/javascript">

        $(function(){
            $("input[name='roomNo']").blur(function(){
                var roomNo =$(this).val();
                $.post("${pageContext.request.contextPath }/roomcheck",{roomNo:roomNo},function(result){
                    if(result){
                        alert("该房间号已存在！！")
                    }else{
                        alert("该房间号使用！")
                    }
                },"JSON")

            })
        });








       window.onload = function(){

           //获取imglist
           var imgList = document.getElementById("imgList");
           //获取页面中所有的img标签
           var imgArr = document.getElementsByTagName("img");
           //设置显示图片的宽度
           imgList.style.width = 440*imgArr.length+"px";
           
           var navDiv = document.getElementById("navDiv");
           var outer  = document.getElementById("outer");

           //设置navDiv的left值
           navDiv.style.left = (outer.offsetWidth-navDiv.offsetWidth)/2 +"px";

           //默认显示图片的索引
           var index=0;
           var allA=document.getElementsByTagName("a");
           // 设置默认显示的效果
           allA[index].style.backgroundColor = "black";

           for (var i = 0; i < allA.length; i++) {
             //为每个超链接添加num属性
             allA[i].num=i;

             allA[i].onclick=function(){

                 //关闭自动切换定时器
                 clearInterval(timer);


                 index=this.num;
                 // imgList.style.left = -220*index +"px";
                 setA();

                 move(imgList,"left",-220*index,20,function(){
                    autoChange();
                 });

             };

           }
           
           //开启自动切换图片
           autoChange();
           //创建一个方法设置选中的a
           function setA(){
             

             //判断当前索引是否为最后一张图片
             if (index>=imgArr.length-1) {
                index=0;

                //通过css将最后一张切换为第一张
                imgList.style.left = 0;


             }
             for (var i = 0; i < allA.length; i++) {
                allA[i].style.backgroundColor = "";
             }
             
             allA[index].style.backgroundColor = "black";
          };
          
          //定义一个自动切换定时器的标识
          var timer;
          function autoChange(){
             
             //开启定时器
             timer=setInterval(function(){
                //索引自增
                index++;

                //判断index的值
                index %=imgArr.length;
 
                move(imgList,"left",-220*index,20,function(){
                   setA();
                });
             }, 2000);

          }
       };

   </script>

</head>
<body>
   <div id="outer">
     <ul id="imgList">
       <li><img src="${pageContext.request.contextPath }/statics/img/tu6.jpg"/></li>
       <li><img src="${pageContext.request.contextPath }/statics/img/tu7.jpg"/></li>
       <li><img src="${pageContext.request.contextPath }/statics/img/tu3.jpg"/></li>
       <li><img src="${pageContext.request.contextPath }/statics/img/tu1.jpg"/></li>
       <li><img src="${pageContext.request.contextPath }/statics/img/tu4.jpg"/></li>
       <li><img src="${pageContext.request.contextPath }/statics/img/tu6.jpg"/></li>
     </ul>
        <div id="add">
            <form action="${pageContext.request.contextPath }/addRoom" method="post">
                <table id="tab" width="400" border="0" cellpadding="0" cellspacing="5" align="center" >
                    <tr>
                        <td colspan="2" align="center">
                            <h1>酒店新增</h1>
                        </td>
                    </tr>
                    <tr>
                    <tr>
                        <td>房间号:</td>
                        <td>
                            <input type="text" name="roomNo" id="roomNo">
                        </td>
                    </tr>
                    <tr>
                        <td>房间类型:</td>
                        <td>
                            <select name="rName">
                                <option value="">请选择</option>
                                <option value="单人房">单人房</option>
                                <option value="双人房">双人房</option>
                                <option value="豪华房">豪华房</option>
                                <option value="海景房">海景房</option>
                                <option value="商务房">商务房</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>房间价格:</td>
                        <td>
                            <input type="text" name="price" id="price">
                        </td>
                    </tr>
                    <tr>
                    <tr>

                        <td>
                            <input type="hidden">
                        </td>
                    </tr>
                    <tr>
                        <td>房间介绍:</td>
                        <td>
                            <textarea name="rDespertion" rows="3" cols="30"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" value="提交" class="sub"/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置" class="sub"/>
                        </td>
                    </tr>

                </table>
            </form>
        </div>







     <!-- 创建导航按钮 -->
     <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
     </div>
   </div>             
</body>
</html>